<template>
  <li>
    <todo-check @todoCheck='todoCheck'></todo-check>
    <todo-content :item="item"></todo-content>
    <todo-remove :item="item" @remove-todo='removeTodo'></todo-remove>
  </li>
</template>

<script>
import TodoCheck from './TodoCheck.vue'
import TodoContent from './TodoContent.vue'
import TodoRemove from './TodoRemove.vue'
export default {
  name: 'TodoItem',
  props: ['item'],
  components: {
    TodoCheck,
    TodoContent,
    TodoRemove,
  },
  methods: {
    /**
     * 子组件向父组件传值
     */
    todoCheck(id){
      this.$emit('toggoleCompleted', id)
    },
    /**
     * 删除代办
     */
    removeTodo(id){
      this.$emit('removeTodo', id)
    }
  },
}
</script>

<style lang="scss" scoped></style>
